<template>
	<view class="container" :style="{background:background,backgroundRepeat:'no-repeat',backgroundSize:'cover'}">
		<navbar background="transparent" title='登录'></navbar>
		<view class="wrap">
			<view class="title">欢迎来到食通态鲜商城</view>
			
			<view class="login-btn line-center" @click="authLogin" v-if='isBindMobile == 1'>
				<text>快捷登录</text>
			</view>
			<view class="phone-number" v-else>
				<view class="login-btn line-center" @click="getPhoneNumber" v-if='!isChecked'>
					<text>快捷登录</text>
				</view>
				<button class="login-btn line-center" @getphonenumber="getPhoneNumber" hover-class="none"
					open-type="getPhoneNumber" v-else>快捷登录</button>
			</view>
		</view>
		<view class="privacy-wrap line-center" @tap='agree'>
			<uni-icons type='checkbox-filled' color="#fff" size="18" v-if='!isChecked'></uni-icons>
			<uni-icons type='checkbox-filled' color="#5DC751" size="18" v-else></uni-icons>
			<view class="privacy-text">我已阅读并同意<text @tap.stop='toAgreement(0)'>《隐私政策》</text></view>
		</view>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				title: '登录',
				hostUrl: app.globalData.hostUrl,
				background: `url(${app.globalData.hostUrl}/static/images/login-bg.png)`,
				btnText: '快捷登录',
				isChecked: false,
				isBindMobile: 0,
			};
		},
		async onLoad() {
			const loginRes = await this.wxLogin();
			if (loginRes.errMsg == "login:ok") {
				app.globalRequest({
					api: app.getApi().loginApi.checkUserBindMobile,
					data: {
						code: loginRes.code
					},
					method: 'post',
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.isBindMobile = res.data
					}
				}).catch(err => {
		
				})
			}
		},
		methods: {
			//设置微信登录
			wxLogin() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: function(res) {
							resolve(res)
						},
						fail: function(err) {
							reject(err)
						}
					})
				})
			},
			// 获取授权的手机号
			async getPhoneNumber(e) {
				console.log('e getPhoneNumber', e)
				let that = this;
				if (!that.isChecked) {
					uni.showToast({
						title: '请阅读并同意协议',
						icon: 'none'
					})
					return;
				}
				console.log('授权手机号---------------')
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.toLogin(1, e.detail)
				}
			},
			//绑定手机号
			getBindMobile(phone_res) {
				console.log('phone_res =======',phone_res)
				const that = this;
				app.globalRequest({
					api: app.getApi().loginApi.bindPhone,
					data: {
						code: phone_res.code,
					},
					method: 'post'
				}).then(res => {
					console.log('getBindMobile', res)
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}).catch(err => {
			
				})
			},
			async toLogin(type = 0, phone_res) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const loginRes = await this.wxLogin();
				console.log('type', type)
				if (loginRes.errMsg == "login:ok") {
					app.globalRequest({
						api: app.getApi().loginApi.login,
						data: {
							code: loginRes.code
						},
						method: 'post',
					}).then(res => {
						console.log(res)
						if (res.code == 0) {
							uni.setStorageSync('TOKEN', res.data);
							uni.setStorageSync('UID',res.user_id);
							if (type == 1) {
								this.getBindMobile(phone_res);
								console.log('绑定手机号==========')
							} else {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'success'
							})
						}
					}).catch(err => {
			
					})
				}
			},
			authLogin() {
				let that = this;
				if (!that.isChecked) {
					uni.showToast({
						title: '请阅读并同意协议',
						icon: 'none'
					})
					return;
				}
				this.toLogin(0)
			},
			agree() {
				this.isChecked = !this.isChecked
			},
			toAgreement(type) {
				uni.navigateTo({
					url: `/pages/user-page/agreement/agreement?type=${type}`
				})
			},
			
		}
	}
</script>
<style>
	/* page {
		width: 100%;
		height: 100%;
		background: #fff;
		overflow-y: hidden;
	} */
</style>
<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		position: relative;
	}


	.wrap {
		position: relative;
		z-index: 3;

		margin: 0 54rpx;
	}

	.title {
		font-weight: bold;
		font-size: 48rpx;
		line-height: 36rpx;
		text-align: center;
		padding-top: 338rpx;
	}

	.pl {
		font-size: 28rpx;
		color: #79797A;
	}

	.login-btn {
		width: 644rpx;
		height: 96rpx;
		background: #07C160;
		border-radius: 10rpx;
		color: #fff;
		font-size: 32rpx;
		margin-top: 76rpx;
	}

	/* .login-btn[disabled]:not([type]),
	.login-btn[disabled][type=default] {
		color: #B1B5BE !important;
		background: #F2F4F7 !important;
	} */

	.privacy-wrap {
		width: 100%;
		position: absolute;
		bottom: 100rpx;

		.privacy-text {
			font-size: 24rpx;
			margin-left: 10rpx;

			text {
				color: $supplier-main-color
			}
		}
	}
</style>